<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .upload-container {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }
        .preview-container {
            margin-top: 20px;
        }
        .preview-image {
            max-width: 300px;
            max-height: 300px;
            margin-top: 10px;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #f8f8f8;
            white-space: pre-wrap;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }
        .image-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .image-item {
            width: 150px;
            text-align: center;
            border: 1px solid #ddd;
            padding: 10px;
        }
        .image-item img {
            max-width: 100%;
            height: 100px;
            object-fit: cover;
        }
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .tab.active {
            border: 1px solid #ddd;
            border-bottom-color: white;
            margin-bottom: -1px;
            border-radius: 4px 4px 0 0;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <h1>图片管理系统</h1>
    
    <div class="tabs">
        <div class="tab active" data-tab="upload">上传图片</div>
        <div class="tab" data-tab="manage">管理图片</div>
    </div>
    
    <div id="uploadTab" class="tab-content active">
        <div class="upload-container">
            <h2>选择图片文件上传</h2>
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="fileInput">选择文件:</label>
                    <input type="file" id="fileInput" name="file" accept="image/*">
                </div>
                <div class="form-group">
                    <label for="moduleInput">模块名称:</label>
                    <input type="text" id="moduleInput" name="module" value="clothing">
                </div>
                <div class="form-group">
                    <label for="relationIdInput">关联ID:</label>
                    <input type="number" id="relationIdInput" name="relationId" value="1">
                </div>
                <button type="button" id="uploadButton">上传文件</button>
            </form>
        </div>
        
        <div class="preview-container">
            <h2>预览</h2>
            <div id="preview"></div>
        </div>
        
        <div class="result">
            <h2>服务器响应</h2>
            <div id="response">尚未上传文件</div>
        </div>
    </div>
    
    <div id="manageTab" class="tab-content">
        <h2>图片列表</h2>
        <div class="form-group">
            <label for="queryModule">模块:</label>
            <input type="text" id="queryModule" value="clothing">
        </div>
        <div class="form-group">
            <label for="queryRelationId">关联ID:</label>
            <input type="number" id="queryRelationId" value="1">
        </div>
        <button id="queryButton">查询</button>
        
        <div class="image-list" id="imageList">
            <!-- 图片列表将在这里显示 -->
        </div>
    </div>
    
    <script>
        // 标签页切换
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                const tabName = this.getAttribute('data-tab');
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                document.getElementById(tabName + 'Tab').classList.add('active');
            });
        });
        
        // 文件变更预览
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const preview = document.getElementById('preview');
            preview.innerHTML = '';
            
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.className = 'preview-image';
                    preview.appendChild(img);
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 上传文件
        document.getElementById('uploadButton').addEventListener('click', function() {
            const fileInput = document.getElementById('fileInput');
            const moduleInput = document.getElementById('moduleInput');
            const relationIdInput = document.getElementById('relationIdInput');
            
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请先选择一个文件');
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            formData.append('module', moduleInput.value);
            formData.append('relationId', relationIdInput.value);
            
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8083/api/upload', true);
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    const responseDiv = document.getElementById('response');
                    responseDiv.textContent = xhr.responseText;
                    
                    try {
                        const jsonResponse = JSON.parse(xhr.responseText);
                        if (jsonResponse.success && jsonResponse.code === 0) {
                            responseDiv.innerHTML += '<br><br>上传成功!<br>图片URL: ' + jsonResponse.data;
                            responseDiv.innerHTML += '<br><br><img src="http://localhost:8083' + jsonResponse.data + '" class="preview-image">';
                        }
                    } catch (e) {
                        console.error('解析响应失败', e);
                    }
                }
            };
            
            xhr.send(formData);
        });
        
        // 查询图片
        document.getElementById('queryButton').addEventListener('click', function() {
            const module = document.getElementById('queryModule').value;
            const relationId = document.getElementById('queryRelationId').value;
            
            fetch(`http://localhost:8083/api/images?module=${module}&relationId=${relationId}`)
                .then(response => response.json())
                .then(data => {
                    const imageList = document.getElementById('imageList');
                    imageList.innerHTML = '';
                    
                    if (data.success && data.code === 0) {
                        const images = data.data;
                        if (images.length === 0) {
                            imageList.innerHTML = '<p>没有找到图片</p>';
                            return;
                        }
                        
                        images.forEach(image => {
                            const imageItem = document.createElement('div');
                            imageItem.className = 'image-item';
                            
                            const img = document.createElement('img');
                            img.src = 'http://localhost:8083' + image.accessUrl;
                            img.alt = image.originalFilename;
                            
                            const filename = document.createElement('p');
                            filename.textContent = image.originalFilename;
                            
                            const deleteButton = document.createElement('button');
                            deleteButton.textContent = '删除';
                            deleteButton.onclick = function() {
                                deleteImage(image.id);
                            };
                            
                            imageItem.appendChild(img);
                            imageItem.appendChild(filename);
                            imageItem.appendChild(deleteButton);
                            
                            imageList.appendChild(imageItem);
                        });
                    } else {
                        imageList.innerHTML = '<p>获取图片失败</p>';
                    }
                })
                .catch(error => {
                    console.error('获取图片失败:', error);
                    document.getElementById('imageList').innerHTML = '<p>获取图片失败</p>';
                });
        });
        
        // 删除图片
        function deleteImage(id) {
            if (!confirm('确定要删除这张图片吗？')) {
                return;
            }
            
            fetch(`http://localhost:8083/api/images/${id}`, {
                method: 'DELETE'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.code === 0) {
                        alert('删除成功');
                        // 刷新图片列表
                        document.getElementById('queryButton').click();
                    } else {
                        alert('删除失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('删除图片失败:', error);
                    alert('删除图片失败');
                });
        }
    </script>
</body>
</html> 